<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>商品管理</title>
    <link href='https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.8/css/bootstrap.min.css' rel='stylesheet'>
    <link rel='stylesheet' href='https://cdn.bootcdn.net/ajax/libs/font-awesome/7.0.0/css/all.min.css'>
    <!-- 引入 ECharts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
    <style>
        body { 
            padding: 20px; 
            background-color: #f8f9fa;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        .product-card {
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
        }
        .chart-container {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            margin-bottom: 25px;
        }
        .chart-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 15px;
            color: #333;
        }
        .chart-wrapper {
            height: 400px;
            width: 100%;
        }
        .stats-card {
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
        }
        .stats-icon {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            font-size: 1.5rem;
        }
    </style>
</head>
<body>
    <div class='d-flex justify-content-between align-items-center mb-4'>
        <h4>化妆品管理</h4>
        <button class='btn btn-primary'><i class='fas fa-plus me-2'></i>添加商品</button>
    </div>
    
    <!-- 销售数据概览 -->
    <div class='row'>
        <div class='col-md-3'>
            <div class='stats-card bg-white p-3'>
                <div class='d-flex align-items-center'>
                    <div class='stats-icon bg-primary text-white'>
                        <i class='fas fa-yen-sign'></i>
                    </div>
                    <div class='ms-3'>
                        <h5 class='mb-0'>¥128,560</h5>
                        <small class='text-muted'>本月销售额</small>
                    </div>
                </div>
            </div>
        </div>
        <div class='col-md-3'>
            <div class='stats-card bg-white p-3'>
                <div class='d-flex align-items-center'>
                    <div class='stats-icon bg-success text-white'>
                        <i class='fas fa-shopping-cart'></i>
                    </div>
                    <div class='ms-3'>
                        <h5 class='mb-0'>1,248</h5>
                        <small class='text-muted'>本月订单</small>
                    </div>
                </div>
            </div>
        </div>
        <div class='col-md-3'>
            <div class='stats-card bg-white p-3'>
                <div class='d-flex align-items-center'>
                    <div class='stats-icon bg-info text-white'>
                        <i class='fas fa-map-marker-alt'></i>
                    </div>
                    <div class='ms-3'>
                        <h5 class='mb-0'>28</h5>
                        <small class='text-muted'>覆盖省市</small>
                    </div>
                </div>
            </div>
        </div>
        <div class='col-md-3'>
            <div class='stats-card bg-white p-3'>
                <div class='d-flex align-items-center'>
                    <div class='stats-icon bg-warning text-white'>
                        <i class='fas fa-chart-line'></i>
                    </div>
                    <div class='ms-3'>
                        <h5 class='mb-0'>15.6%</h5>
                        <small class='text-muted'>同比增长</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 地域销售图表 -->
    <div class="chart-container">
        <div class="chart-title">各省市销售额分布</div>
        <div id="regionChart" class="chart-wrapper"></div>
    </div>
    
    <div class='row'>
        <div class='col-md-4'>
            <div class='product-card bg-white'>
                <div style='height: 180px; background: linear-gradient(45deg, #ff9a9e, #fad0c4); display: flex; align-items: center; justify-content: center; color: white; font-size: 3rem;'>
                    <i class='fas fa-seedling'></i>
                </div>
                <div class='p-3'>
                    <h5>玻尿酸保湿精华</h5>
                    <p class='text-muted'>深层补水，持久保湿</p>
                    <div class='d-flex justify-content-between align-items-center'>
                        <span class='text-primary fw-bold'>¥199</span>
                        <div>
                            <button class='btn btn-sm btn-outline-primary me-1'><i class='fas fa-edit'></i></button>
                            <button class='btn btn-sm btn-outline-danger'><i class='fas fa-trash'></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class='col-md-4'>
            <div class='product-card bg-white'>
                <div style='height: 180px; background: linear-gradient(45deg, #a1c4fd, #c2e9fb); display: flex; align-items: center; justify-content: center; color: white; font-size: 3rem;'>
                    <i class='fas fa-lipstick'></i>
                </div>
                <div class='p-3'>
                    <h5>哑光唇釉套装</h5>
                    <p class='text-muted'>持久显色，轻盈不拔干</p>
                    <div class='d-flex justify-content-between align-items-center'>
                        <span class='text-primary fw-bold'>¥159</span>
                        <div>
                            <button class='btn btn-sm btn-outline-primary me-1'><i class='fas fa-edit'></i></button>
                            <button class='btn btn-sm btn-outline-danger'><i class='fas fa-trash'></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class='col-md-4'>
            <div class='product-card bg-white'>
                <div style='height: 180px; background: linear-gradient(45deg, #ffecd2, #fcb69f); display: flex; align-items: center; justify-content: center; color: white; font-size: 3rem;'>
                    <i class='fas fa-spa'></i>
                </div>
                <div class='p-3'>
                    <h5>玫瑰花水喷雾</h5>
                    <p class='text-muted'>舒缓镇静，补水保湿</p>
                    <div class='d-flex justify-content-between align-items-center'>
                        <span class='text-primary fw-bold'>¥89</span>
                        <div>
                            <button class='btn btn-sm btn-outline-primary me-1'><i class='fas fa-edit'></i></button>
                            <button class='btn btn-sm btn-outline-danger'><i class='fas fa-trash'></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 省市销售排行榜 -->
    <div class="chart-container">
        <div class="chart-title">省市销售排行榜</div>
        <div id="rankingChart" class="chart-wrapper"></div>
    </div>

    <script>
        // 地图数据
        var regionChart = echarts.init(document.getElementById('regionChart'));
        
        var regionOption = {
            title: {
                text: '2023年各省市销售额分布',
                subtext: '单位：万元',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>{c} 万元'
            },
            visualMap: {
                min: 0,
                max: 2500,
                left: 'left',
                top: 'bottom',
                text: ['高','低'],
                calculable: true,
                inRange: {
                    color: ['#e0ffff', '#006edd']
                }
            },
            series: [
                {
                    name: '销售额',
                    type: 'map',
                    map: 'china',
                    roam: false,
                    label: {
                        show: true
                    },
                    data: [
                        { name: '北京', value: 1800 },
                        { name: '天津', value: 1200 },
                        { name: '上海', value: 2200 },
                        { name: '重庆', value: 900 },
                        { name: '河北', value: 800 },
                        { name: '河南', value: 1100 },
                        { name: '云南', value: 700 },
                        { name: '辽宁', value: 1300 },
                        { name: '黑龙江', value: 950 },
                        { name: '湖南', value: 1400 },
                        { name: '安徽', value: 1000 },
                        { name: '山东', value: 1600 },
                        { name: '新疆', value: 600 },
                        { name: '江苏', value: 2000 },
                        { name: '浙江', value: 2300 },
                        { name: '江西', value: 900 },
                        { name: '湖北', value: 1500 },
                        { name: '广西', value: 850 },
                        { name: '甘肃', value: 650 },
                        { name: '山西', value: 800 },
                        { name: '内蒙古', value: 750 },
                        { name: '陕西', value: 1200 },
                        { name: '吉林', value: 850 },
                        { name: '福建', value: 1800 },
                        { name: '贵州', value: 700 },
                        { name: '广东', value: 2500 },
                        { name: '青海', value: 500 },
                        { name: '西藏', value: 400 },
                        { name: '四川', value: 1900 },
                        { name: '宁夏', value: 600 },
                        { name: '海南', value: 750 },
                        { name: '台湾', value: 1700 },
                        { name: '香港', value: 1600 },
                        { name: '澳门', value: 900 }
                    ]
                }
            ]
        };
        
        regionChart.setOption(regionOption);
        
        // 排行榜数据
        var rankingChart = echarts.init(document.getElementById('rankingChart'));
        
        var rankingOption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: ['广东', '浙江', '江苏', '上海', '北京', '山东', '福建', '四川', '湖北', '湖南']
            },
            series: [
                {
                    name: '销售额',
                    type: 'bar',
                    data: [2500, 2300, 2000, 2200, 1800, 1600, 1800, 1900, 1500, 1400],
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            { offset: 0, color: '#ff6b9d' },
                            { offset: 1, color: '#a16ae8' }
                        ])
                    }
                }
            ]
        };
        
        rankingChart.setOption(rankingOption);
        
        // 窗口大小调整时重置图表大小
        window.addEventListener('resize', function() {
            regionChart.resize();
            rankingChart.resize();
        });
    </script>
</body>
</html>